<template>
  <div class="employee_detail">
    <Row type='flex'
         justify="center"
         style="padding-top:100px">
      <Col>
      <Form :label-width="80">
        <div class="header-title">员工详情</div>
        <Row class="row_content">
          <FormItem label="姓名："
                    label-position>
            <p class="row_content_text">{{infos.username}}</p>
          </FormItem>
          <FormItem label="手机号："
                    label-position>
            <p class="row_content_text">{{infos.phoneNumber}}</p>
          </FormItem>
          <FormItem label="性别："
                    label-position>
            <p class="row_content_text">{{infos.sex}}</p>
          </FormItem>
          <FormItem label="邮箱："
                    label-position>
            <p class="row_content_text">{{infos.email}}</p>
          </FormItem>
          <FormItem label="组织机构："
                    label-position>
            <p class="row_content_text">{{infos.orgName}}</p>
          </FormItem>
          </FormItem>
          <FormItem label="角色："
                    label-position>
            <p class="row_content_text">{{infos.rolename}}</p>
          </FormItem>
        </Row>
      </Form>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getUserInfos } from '@/api/system/employee.js'
export default {
  name: 'employee_detail',
  data () {
    return {
      infos: {
        username: '',
        phoneNumber: '',
        sex: '',
        email: '',
        orgName: '',
        rolename: ''
      },
      id: ''
    }
  },
  mounted () {
    this.router()
  },
  methods: {
    router () {
      this.id = this.$route.params.id
      if (this.id) {
        getUserInfos({// 详情和编辑过来调用查找数据
          'id': this.id,
          'orgId': this.$route.query.orgId
        }).then((res) => {
          if (res.data.status === 200) {
            this.infos.username = res.data.data.username
            this.infos.phoneNumber = res.data.data.phoneNumber
            if (res.data.data.sex === 1) {
              this.infos.sex = '男'
            } else if (res.data.data.sex === 0) {
              this.infos.sex = '女'
            } else {
              this.infos.sex = ''
            }
            this.infos.email = res.data.data.email
            this.infos.orgName = res.data.data.orgName
            if (res.data.data.roleList) {
              let newName = ''
              res.data.data.roleList.forEach(it => {
                newName = newName + it.roleName + '|'
              })
              newName = newName.substring(0, newName.length - 1)
              this.infos.rolename = newName
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    }
  }
}
</script>
<style lang="less">
.employee_detail {
  // margin: 16px;
  .header-title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #17233d;
    letter-spacing: 0;
    font-weight: bold;
    margin: 17px 36px 24px 36px;
  }
  .row_content {
    margin-left: 64px;
    .ivu-form-item {
      margin-bottom: 0;
      font-size: 12px;
      color: #464c5b;
      letter-spacing: 0;
      .ivu-form-item-label {
        font-family: PingFangSC-Medium;
        font-weight: bold;
      }
      .row_content_text {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #464c5b;
        letter-spacing: 0;
      }
      .ivu-checkbox-wrapper {
        margin-right: 69px;
      }
      .ivu-checkbox-disabled + span {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #464c5b;
        letter-spacing: 0;
      }
    }
  }
}
</style>
